/*
 * @Description: “菜单”页面
 * @Author: 谢涛
 * @Date: 2019-07-11 11:15:38
 * @LastEditTime: 2021-05-28 17:24:12
 * @LastEditors: 陈科引
 */

import React, { Component } from "react";
import {
	DeleteOutlined,
	FileAddOutlined,
	FormOutlined,
	SearchOutlined,
} from "@ant-design/icons";
import "@ant-design/compatible/assets/index.css";
import {
	Form,
	Col,
	Row,
	Input,
	Button,
	Popconfirm,
	Select,
	message,
	Menu,
	Dropdown,
	Table,
} from "antd";

import EditItem from "./EditItem";
import { menuApi } from "@/services/basic";
import BtnPermission from "../../components/BtnPermission";
import "../../layouts/queryList.css";
const InputGroup = Input.Group;
const Option = Select.Option;

class MenuSetting extends Component {
	constructor(props) {
		super(props);
		this.state = {
			data: [], //data包含了总页数、当前页、页面显示条数等
			records: [], //records对应列表上的每条数据
			handlers: {
				create: "create",
				view: "view",
				update: "update",
			}, //定义操作类型
		};
	}

	//组件挂载后为列表请求数据
	componentDidMount = () => {
		
		this.queryData();
	};

	//页码变化的时候，请求数据
	onChange = (pagination) => {
		this.queryData(pagination);
	};

	//增、改一条数据后刷新列表
	editItemDone = () => {
		
		this.queryData();
	};

	//增查改、设置操作类型，并传入对应行数据
	setHandler = (handler, record) => {
		this.Editor.showModal(handler, record);
	};

	//删除一条数据后刷新列表
	deleteItem = (id) => {
		menuApi.delete(id).then((res) => {
			if (res.code === "1") {
				message.success(res.msg);
				this.queryData();
			}
			message.warning(res.msg);
		});
	};

	// 处理数据
	handleTree = (data, id, parentId, children, rootId) => {
		id = id || 'id'
		parentId = parentId || 'sjid'
		children = children || 'children'
		rootId = rootId || 0
		//对源数据深度克隆
		const cloneData = JSON.parse(JSON.stringify(data))
		//循环所有项
		const treeData = cloneData.filter(father => {
				let branchArr = cloneData.filter(child => {
						//返回每一项的子级数组
						return father[id] === child[parentId]
				});
				father.children = branchArr.length > 0 ? branchArr : ''
				//返回第一层
				return father[parentId] === rootId;
		});
		return treeData.length > 0 ? treeData : data;
	}

	//查找框查找数据
	queryData = (pagination=undefined) => {
		let formData = this.form.getFieldsValue();
		formData = {
			...formData,
			size:999
		}
		menuApi.getPage({ formData, pagination }).then((res) => {
			this.setState({ data: res, records: this.handleTree(res.records) });
		});
	};

	qxxz = (name, record) => {
		const { dj, id } = record;
		let params = {
			mc: name,
			dj: dj + 1,
			sjid: id,
			xh: 1,
			btnbz: "1",
		};
		menuApi.post(params).then((res) => {
			this.queryData();
			message.success("操作成功");
		});
	};

	render() {
		const { create, update } = this.state.handlers;
		const menu = (record) => {
			return (
				<Menu>
					<Menu.Item>
						<div onClick={() => this.qxxz("增加", record)}>增加</div>
					</Menu.Item>
					<Menu.Item>
						<div onClick={() => this.qxxz("删除", record)}>删除</div>
					</Menu.Item>
					<Menu.Item>
						<div onClick={() => this.qxxz("修改", record)}>修改</div>
					</Menu.Item>
					<Menu.Item>
						<div onClick={() => this.qxxz("查询", record)}>查询</div>
					</Menu.Item>
					<Menu.Item>
						<div onClick={() => this.qxxz("审核", record)}>审核</div>
					</Menu.Item>
				</Menu>
			);
		};
		const columns = [
			{ title: "序号", dataIndex: "xh" },
			{ title: "名称", dataIndex: "mc" },
			{ title: "上级菜单", dataIndex: "sjName" },
			{ title: "等级", dataIndex: "djName" },
			// { title: '图标', dataIndex: 'tb' },
			// { title: 'URL', dataIndex: 'url' },
			// { title: '末级标志', dataIndex: 'mjbzName' },
			// { title: '按钮标志', dataIndex: 'btnbzName' },
			{
				title: "操作",
				key: "action",
				fixed: "right",
				width: 100,
				render: (text, record) => (
					<span className="handleButton">
						{/* 以下分别对应：改、删、等操作 */}
						{record.btnbz !== "1" ? (
							<Dropdown overlay={menu(record)}>
								<FileAddOutlined title="权限新增" className="update-button" />
							</Dropdown>
						) : null}
						{this.props.permission.edit ? (
							<FormOutlined
								title="修改"
								onClick={() => this.setHandler(update, record)}
								className="update-button"
							/>
						) : (
							""
						)}
						{this.props.permission.delete ? (
							<Popconfirm
								title="确认删除?"
								onConfirm={() => this.deleteItem(record.id)}
							>
								<DeleteOutlined title="删除" className="delete-button" />
							</Popconfirm>
						) : (
							""
						)}
					</span>
				),
			},
		];

		//从state中获取data
		let { records } = this.state;

		return (
			<div className="queryList">
				<Form
					autoComplete="off"
					ref={(form) => (this.form = form)}
					layout="inline"
				>
					<InputGroup className="input-group">
						<Row gutter={24}>
							<Col span={6}>
								<Form.Item
									label="菜单名称"
									name="mc"
									getValueFromEvent={(event) =>
										event.target.value.replace(/\s+/g, "")
									}
								>
									<Input allowClear placeholder="请输入" />
								</Form.Item>
							</Col>
							<Col span={4}>
								<Form.Item label="菜单等级" name="dj">
									<Select allowClear placeholder="请选择">
										{/* <Option value={1}>一级</Option>
                                        <Option value={2}>二级</Option>
                                        <Option value={3}>三级</Option>
                                        <Option value={4}>四级</Option> */}
										<Option value={null}>全部</Option>
										{this.props.bookRender("cddj")}
									</Select>
								</Form.Item>
							</Col>
							<Col span={2}>
								<Button
									onClick={(e) => this.queryData(e)}
									icon={<SearchOutlined />}
									className="search-button"
								>
									查询
								</Button>
							</Col>
							{this.props.permission.add ? (
								<Col span={2}>
									<Button
										icon={<FileAddOutlined />}
										className="addButton"
										onClick={() => this.setHandler(create)}
									>
										新增
									</Button>
								</Col>
							) : (
								""
							)}
						</Row>
					</InputGroup>
				</Form>
				{/* <MyTable
					props={{
						columns,
						dataSource: records,
						data,
						setHandler: this.setHandler,
						onChange: this.onChange,
						permission: this.props.permission,
					}}
				/> */}
				<div style={{ padding: '10px' }}>
					<Table
							columns={columns}
							dataSource={records}
							rowKey={(r, i) => (r.id)}
							pagination={false}
							onRow={
									((record) => {
											return {
													onDoubleClick: (event) => this.setHandler('view', record),
											};
									})
							}
					/>
				</div>
				<div>
					<EditItem
						ref={(Editor) => (this.Editor = Editor)}
						editItemDone={this.editItemDone}
						bookRender={this.props.bookRender}
					/>
				</div>
			</div>
		);
	}
}
export default BtnPermission(MenuSetting, {
	dataBook: {
		81: "cddj", // 菜单等级
	},
});
